<template>
    <div class="prescription">
        <el-table :data="tableData" class="tb-edit" border style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column label="序号" min-width="50px">
                <template scope="scope">
                    <span v-if="scope.row.edit">
                        {{ scope.$index + 1 }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column :key="item.label" :label="item.label" :min-width="item.width || ''" v-for="(item, index) in config.column">
                <template scope="scope">

                  <search-input :searchName="scope.row[item.name]" :key="scope.row.id" :ref="'input_' + scope.$index + '_' + index" v-if="item.type == 'searchInput'" :config="sConfig" :controls="false" :disabled="!scope.row.edit" v-model="scope.row[item.key]"  placeholder="" @change="(row) => {  nextFocus(scope.$index, index)}"></search-input>
<!--                  <el-select :ref="'input_' + scope.$index + '_' + index" v-if="item.type == 'select'"-->
<!--                             filterable-->
<!--                             remote  placeholder="" :disabled="!scope.row.edit" :controls="false" v-model="scope.row[item.key]"  @change="nextFocus(scope.$index, index)"></el-select>-->
                    <span v-if="item.type == 'text'">{{ scope.row[item.key] }}</span>
                    <el-input :ref="'input_' + scope.$index + '_' + index" v-if="item.type == 'input'" :disabled="!scope.row.edit" v-model="scope.row[item.key]" @keyup.enter.native="nextFocus(scope.$index, index)"></el-input>
                    <el-input-number :ref="'input_' + scope.$index + '_' + index" v-if="item.type == 'number'" :controls="false" v-model="scope.row[item.key]" :min="item.min || 0" :max="item.max" @keyup.enter.native="nextFocus(scope.$index, index)"></el-input-number>
                    <el-date-picker :ref="'input_' + scope.$index + '_' + index" v-if="item.type == 'date'" v-model="scope.row[item.key]" type="date" @change="nextFocus(scope.$index, index)"></el-date-picker>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="50px" align="center">
                <template scope="scope">
                    <el-button v-if="scope.row.edit && scope.row.itemMark" type="text" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import request from '@/utils/request'
    import SearchInput from "../../../../components/searchInput";

    export default {
        name: "prescription",
        components: {SearchInput},
        props: {
            value: {
                type: Array,
                default: ''
            },
            config: {
                type: Object,
                default: {}
            },
            fixed: {
                type: Boolean,
                default: false
            },
            defaultLength: {
                type: Number,
                default: 8
            }
        },
        data(){

            return {
                sConfig: {
                    api: '/sinohis/pension/fee/itemmanager/searchAllItemInfos',
                    method: 'post',
                    postKey: 'mnemonicCodeOrName',
                    label: 'name',
                    value: 'mark',
                    data: { nurseItemBol: true,},
                    keys: [
                        { name: '名称', key: 'name' },
                        { name: '价格', key: 'fee' },
                    ]
                },
                tableData: [],
                groupIndex: 0,
                FRI: 0,
                FII: 0,
                newLine: 0,
            }
        },
        mounted() {
            this.parentHandleclick(this.value)
            this.setList()
            this.$nextTick(() => {
                console.log(this.$refs)
            })
        },
        methods: {

            setList(){
                let list = [...this.tableData]
                let length = this.defaultLength - list.length
                for(let i = 0; i < length; i++){
                    let row = {...this.config.data}

                    list.push(row)
                }
                list[0].edit = true
                this.tableData = list
            },
            searchChange(row, index){
                console.log(row)
                 this.tableData[index] = Object.assign(this.tableData[index], row)
            },
            handleDelete(index){

                 this.tableData.push({...this.config.data})

                this.setList()
                this.tableData.splice(index, 1)
            },
            checkArr(list = this.tableData){
                for(let i=0; i<list.length; i++){
                    let item = list[i]
                    let sum = 0
                    Object.keys(item).forEach(key => {
                        if(item[key]){
                            sum++
                        }
                    })
                    if(sum > 1){
                        if(!list[i + 1]){

                            let  row={...this.config.data}

                            list.push({...row})
                            console.log(list)
                        }
                        list[i]['key']='a'+i
                        list[i]['edit'] = true
                        list[i + 1]['edit'] = true
                        list[i]['checkEdit'] = true
                    }
                }

            },
            tableRowClassName({row, rowIndex}) {
                return 'color' + row.a005
            },
            parentHandleclick(list) {

                this.tableData = list
                this.newLine = list.length > this.defaultLength ? list.length : this.defaultLength
                this.setList()
            },
            grouping(){
                let list = this.tableData.filter(item => item.a004)
                if(this.checkGroup(list)){
                    this.tableData.forEach(item => {
                        if(item.a004){
                            item.a004 = false
                            item.a005 = this.groupIndex + 1
                        }
                    })
                    this.groupIndex ++
                }else{
                    this.$message.error('频率和用法不能为空，且组内需要一致')
                }
            },
            ungroup(){
                this.tableData.forEach(item => {
                    if(item.a004){
                        item.a004 = false
                        item.a005 = ''
                    }
                })
            },
            checkGroup(a){
                for(let i=0; i<a.length; i++){
                    if(i){
                        if(!a[i].a007 || !a[i].a008 || a[i].a007 != a[i-1].a007 || a[i].a008 != a[i-1].a008){
                            return false
                        }
                    }
                }
                return true
            },
            nextFocus($index, index){
                console.log(this.$refs)
                setTimeout(() => {
                    this.FRI = $index
                    this.FII = index
                    let item = this.getNext()
                    console.log(item)
                    item && (item.focus())
                    console.log($index, index)
                }, 200)
            },
            getNext(){
                let x;
                if(this.fixed){
                    if(this.FRI == this.newLine - 1 && this.FII == this.config.column.length - 1){
                        console.log(11111111111)
                        x = 0
                    }else{
                        x = this.FRI >= this.newLine ? 0 : 1
                    }
                }else{
                    x = 0
                }
                for(let i=this.FII + 1; i<this.config.column.length; i++){
                    this.FII = i
                    let ref = 'input_' + this.FRI + '_' + i
                    let doms = this.$refs[ref]
                    if(doms){
                        return doms[x]
                    }
                }
                this.FRI++
                this.FII = 0
                let ref = 'input_' + this.FRI + '_' + this.FII
                let doms = this.$refs[ref]
                if(doms){
                    return doms[x]
                }
                return false
            }
        },
        watch: {
            // value: function(val){
            //     this.tableData = val
            //     this.setList()
            // },
            tableData: {
                handler(list){
                    console.log(list)

                    this.checkArr(list)

                     this.$emit('input', list.filter(item => item.itemMark))
                },
                deep: true
            }
        },
        beforeDestroy(){

        }
    };
</script>
<style scoped>
    .prescription >>> .el-input{width: 100%;}
    .prescription >>> .el-input .el-input__inner{padding: 0 4px;height: 20px;line-height: 20px;border-color: rgba(0,0,0,0);background: none;transition: all 0.4s;}
    .prescription >>> .el-input .el-input__inner:hover{border-color: rgba(0,0,0,0);}
    .prescription >>> .el-input .el-input__inner:focus{background: #fff;border-color: #4c6ca7;}
    .prescription >>> .cell{padding-left: 5px;padding-right: 5px;}
    .prescription >>> .cell>span{margin-left: 5px;}
    .prescription >>> .is-center .cell{padding-left: 0;padding-right: 0;}
    .prescription >>> thead .cell{padding-left: 9px;padding-right: 5px;}

    .prescription >>> .el-textarea{width: 100%;}
    .prescription >>> .el-textarea__inner{padding: 0 4px;height: 20px;line-height: 20px;border-color: rgba(0,0,0,0);background: none;transition: all 0.4s;resize: none;}
    .prescription >>> .el-textarea__inner:focus{background: #fff;border-color: #4c6ca7;}
    .prescription >>> .el-table.tb-edit .cell{padding-top: 0;padding-bottom: 0;}
    .prescription >>> .el-table.tb-edit td{padding: 0;height: 30px;}
    .prescription >>> .el-input.is-disabled .el-input__inner {cursor: auto;}
    .prescription >>> .el-textarea.is-disabled .el-textarea__inner {cursor: auto;}
    .prescription >>> .el-input__suffix{display: none;}

    .prescription >>> .el-checkbox.is-disabled .el-checkbox__input{opacity: 0;cursor: auto;}
    .prescription >>> .el-checkbox.is-disabled .el-checkbox__inner{cursor: auto;}

    .prescription >>> .el-table .color1 {background: #f0f9eb;}
    .prescription >>> .el-table .color2 {background: #fdf6ec;}
    .prescription >>> .el-table .color3 {background: #feeff0;}
    .prescription >>> .el-table .color4 {background: #ecf5ff;}

    .btnAll{padding-top: 20px;}

    .prescription >>> .el-input-number{width: auto;}
    .prescription >>> .el-date-editor .el-input__icon{display: none;}
</style>
